<script setup lang="ts">

import {computed} from "vue";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

const count = computed(()=>{
  return (props.data?.vfal || 0) - 1 < 0 ? 0 : (props.data?.vfal || 0) - 1;
})

const zf = computed(()=>{
  const zfl:number = Number((props.data?.weight * (props.data?.fp / 100)).toFixed(1)) - Number((props.data?.weight * 0.14).toFixed(1))
  if(zfl > 0){
    return `-${zfl.toFixed(1)}`
  }
  return `+${zfl.toFixed(1)}`
})

const jr = computed(()=>{
  const zfl:number = Number((props.data?.mm - (props.data?.mm_normal?.[0] + (props.data?.mm_normal?.[1]-props.data?.mm_normal?.[0]) / 2)).toFixed(1))
  if(zfl > 0){
    return `-${zfl.toFixed(1)}`
  }
  return `+${zfl.toFixed(1)}`
})


</script>

<template>
  <div class="pl-[47px] pr-[51px]">
    <div class="mt-[32px] flex justify-between">
      <div class="flex items-center">
        <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt="">
        <span class="text-[14px] text-[#4D4D4D] ml-[4px] font-medium">内脏脂肪分析</span>
      </div>
      <div class="mt-[10px] text-[14px] text-[#4D4D4D]">内脏脂肪等级</div>
    </div>

    <div class="relative mt-[30px] overflow-visible">
      <div class="flex absolute top-[-30px] w-[100%] text-[#808080] overflow-visible">
        <div v-for="(_,i) in 29" :key="i" class="h-[24px] ml-[-1px] overflow-visible" :style="{
        width: i < 14 ? '5.5%' : '1.8%',
      }">{{ i <= 14 ? i : i % 4 === 2 ? i : '' }}</div>
        <div style="transform: translateX(8px)">30</div>
        </div>
      <div class="flex items-center absolute top-0 w-[100%] text-[#fff]">
        <div class="w-[48%] h-[24px] text-center">正常</div>
        <div class="w-[28%] text-center">偏高</div>
        <div class="flex-1 text-center">高</div>
      </div>
      <div class="flex">
        <div v-for="(_,i) in 29" :key="i" class="h-[24px] ml-[-1px]" :style="{
        backgroundColor: i < 9 ? '#F7B500' : i >= 9 && i < 14 ? '#FC7916' : '#FB2D19',
        width: i < 14 ? '6%' : '2%',
      }"></div>
      </div>
    </div>
    <div class="flex mt-[24px] overflow-visible">
      <div v-for="(_,i) in count" :key="i" class="h-[6px] ml-[-1px]" :style="{
        backgroundColor: count > 14 ? '#FB2D19' : count > 9 ? '#FC7916' : '#F7B500',
        width: i < 14 ? '6%' : '2%',
      }"></div>
      <div class="w-[12px] h-[12px] rounded-[12px] border-[#FC7916] border-[3px] bg-[#fff] mt-[-3px] ml-[-12px]"></div>
      <div class="mt-[-11px] ml-[5px]"><span class="text-[#1A1A1A] text-[18px] ff-DINAlternate-Bold">{{ data?.vfal }}</span><span class="text-[#808080] text-[16px]">（{{ data.vfal <= 9 ? '正常' : data.vfal > 9 && data.vfal <= 14 ? '偏高' : '高' }}）</span></div>
    </div>

    <div class="mt-[15px] flex justify-between">
      <div class="flex items-center">
        <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt="">
        <span class="text-[14px] text-[#4D4D4D] ml-[4px] font-medium">脂肪-肌肉控制</span>
      </div>
    </div>

    <div class="flex justify-center">
      <div class="w-[382px] h-[255px] relative">
        <img src="@/assets/img/icon/img_zfjr.png" class="w-[100%] h-[100%]">
        <div class="absolute top-[61px] w-[98px] overflow-visible">
          <div class="text-[#1A1A1A] text-[18px] font-medium text-center overflow-visible">脂肪控制</div>
          <div class="text-[#808080] text-[22px] font-medium text-center overflow-visible ff-DINAlternate-Bold"><span class="text-[#FB2D19] text-[32px]">{{ zf }}</span>kg</div>
        </div>
        <div class="absolute top-[61px] right-[0] w-[98px] overflow-visible">
          <div class="text-[#1A1A1A] text-[18px] font-medium text-center overflow-visible">肌肉控制</div>
          <div class="text-[#808080] text-[22px] font-medium text-center overflow-visible ff-DINAlternate-Bold"><span class="text-[#FB2D19] text-[32px]">{{ jr }}</span>kg</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
</style>
